
import React, { useEffect, useMemo, useState } from "react"
import { comRequest } from '../../request'
import { QQitem } from '../QQitem'
import { Affix, Button, Form, Select, Input, Space, Row, Col } from 'antd'

import "./index.less";
const hyList = [
    {
        name: '中证500',
        code: 510500,
    },
    {
        name: '沪深300',
        code: 510300,
    },
    {
        name: '上证50',
        code: 510050,
    },
    {
        name: '科创50',
        code: 588000,
    },
    {
        name: '科创板50',
        code: 588080,
    },
    {
        name: '创业板',
        code: 159915,
        isSz: true
    },
]
const handleClickBack = () => {
    document.body.scrollTop = document.documentElement.scrollTop = 0;
}

const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};
export const QQMain = ({ type }) => {
    const [form] = Form.useForm();

    const [searchData, setSearchData] = useState({})

    const onFinish = (values) => {
        console.log(values);
        setSearchData(values)
    };

    const onReset = () => {
        form.resetFields();
        setSearchData('')
    };
    const onValuesChange = () => {
    };

    const showList = useMemo(() => {
        if (searchData?.codes && searchData?.codes?.length) {
            return hyList.filter(v => searchData?.codes.includes(v.code))
        }
        return hyList
    }, [hyList, searchData.codes])
    console.log("showList", showList)
    console.log("searchData", searchData)
    return <div>
        <div className="search">
            <Form
                form={form}
                onFinish={onFinish} onValuesChange={onValuesChange}>
                <Row gutter={24}>
                    <Col><Form.Item label='指数选择' name='codes'>
                        <Select options={hyList.map(v => ({ label: `${v.name}(${v.code})`, value: v.code }))}

                            style={{ width: '300px' }}
                            mode='multiple'
                        >

                        </Select>
                    </Form.Item>
                    </Col>
                    <Col>
                        <Form.Item label='最小持仓量' name='ccl'>
                            <Input addonAfter='张' />
                        </Form.Item>
                    </Col>
                    <Col>
                        <Form.Item label='合约价格大于' name='currentMinPrice'>
                            <Input addonAfter='元' />
                        </Form.Item></Col>
                    <Col>
                        <Form.Item label='合约价格小于' name='currentMaxPrice'>
                            <Input addonAfter='元' />
                        </Form.Item></Col>
                    <Col>
                        <Form.Item label='隐含波动率小于' name='yhbdlNumber'>
                            <Input addonAfter='%' />
                        </Form.Item></Col>
                    <div style={{ textAlign: 'right' }}>
                        <Form.Item {...tailLayout}>
                            <Space>
                                <Button type="primary" htmlType="submit">
                                    查询
                                </Button>
                                <Button htmlType="button" onClick={onReset}>
                                    重置
                                </Button>
                            </Space>
                        </Form.Item>
                    </div>
                </Row>
            </Form>
        </div>
        <Affix offsetTop={500}
            style={{ position: 'absolute', right: 0, }}
        >
            <Button type='primary' onClick={handleClickBack} >
                回到顶部
            </Button>

        </Affix>
        {showList.map(hLItem => {
            return <div className="main" key={hLItem.code}>
                <h1 className="date">
                    {hLItem?.name}({hLItem.code})
                </h1>
                <QQitem code={hLItem.code} isSz={hLItem.isSz} type={type} searchData={searchData} />
            </div>
        })}


    </div>
}